
<script>
import DetailAction from "@/views/member/order/components/detail-action.vue";
import {ref} from "vue";
import {useRoute} from "vue-router";
import {findOrder} from "@/api/order";
import {defineAsyncComponent} from "vue";
// import DetailLogistics from "@/views/member/order/components/detail-logistics.vue";
// eslint-disable-next-line
const DetailLogistics =defineAsyncComponent(()=>import('./components/detail-logistics.vue'))
export default {
  name: "OrderDetail",
  components: {DetailAction, DetailLogistics},
  setup(){
    const order = ref(null)
    const route = useRoute()
    findOrder(route.params.id).then(data=>{
      order.value = data.result
    })

    return {order}
  }
}
</script>

<template>
<div class="order-detail" v-if="order">
<!--  操作栏-->
  <DetailAction :order="order"/>
<!--  物流区块-->
  <Suspense v-if="[3,4,5].includes(order.orderState)">
    <template v-slot:default>
      <DetailLogistics :order="order"/>
    </template>
    <template v-slot:fallback>
      <div class="loading">loading</div>
    </template>
  </Suspense>
</div>
</template>

<style scoped lang="less">
.order-detail {
  background: #fff;
}
</style>